import React from "react";
import {message} from "antd";
import {ALFlexBox, ALImage} from "../../../../../components/al-component";
import './style.scss';
import {connect} from "react-redux";


function ImgBgBox(props){
  let boxSize = {width: props.width, height: props.height}
  return (
      <div className="img-bg-box al-hover-shadow-black-30"
           style={boxSize}>
        <img
          src={props.data.poster}
          style={{
            width: props.width,
            height: '264px'
          }}
          className="bg-img"
          onClick={() => {
            message.info("点击了图片");
            console.log("点击了图片")
          }}
        />

        {/*遮罩*/}
        <div className="mask"/>
        {/*文字*/}
        <div className="desc-text">
          <ALFlexBox centerVH style={boxSize}>
            <h1 className="al-text-color-white">{props.data.title}</h1>
          </ALFlexBox>
        </div>
      </div>
  )
}

function AlbumBox(props) {
  const albumData = [
    {
      title: "秋叶",
      poster: "https://ali.image.hellorf.com/images/682ccd2b82519cde5d416c7c932b1788.jpeg?x-oss-process=image/resize,h_528"
    },
    {
      title: "二十四节气-白露",
      poster: "https://ali.image.hellorf.com/images/b67f4625727fa2ae45000452c0258253.jpeg?x-oss-process=image/resize,h_528"
    },
    {
      title: "老师",
      poster: "https://ali.image.hellorf.com/images/5bbf7f91a22277045db4772a017c815c.jpeg?x-oss-process=image/resize,h_528"
    },
    {
      title: "运动拉伸",
      poster: "https://ali.image.hellorf.com/images/e141926a59531dbf166d503fb58edeb0.jpeg?x-oss-process=image/resize,h_528"
    },
    {
      title: "间隔年",
      poster: "https://ali.image.hellorf.com/images/cf98d9c4247bea8737c8e742401665b1.jpeg?x-oss-process=image/resize,h_528"
    },
    {
      title: "影子",
      poster: "https://ali.image.hellorf.com/images/6782eeee79505f452eff95d9d395f944.jpeg?x-oss-process=image/resize,h_528"
    },
    {
      title: "花莲",
      poster: "https://ali.image.hellorf.com/images/2db5c64fefc4b14df9ab7ced4a588392.jpeg?x-oss-process=image/resize,h_528"
    }
  ];

  const {isMobile} = props;
  return (
      <div className="album-box">
        <ALFlexBox wrap between centerV>
          {
            albumData.map((item, index) => {
              return <div key={index} onClick={() => {
                console.log("点击了图片")
              }}>
                <ImgBgBox data={item}
                          width={(index === 1) || (index === 2) ? (isMobile ? undefined : '784px') : undefined}
                          height={'264px'} />
              </div>
            })
          }
        </ALFlexBox>
      </div>
  );
}

const mapStateToProps = state => {
  return {
    isMobile: state.isMobile
  }
}

export default connect(mapStateToProps)(AlbumBox);
